<template>
	<view class="content">
		<u-navbar
			title="淘京收" 
			:bg-color="`${mainColor}`" 
			fixed 
			placeholder 
			autoBack
			:height="navigationBarHeight"
			:title-style="{color:`${textColor}`, fontSize:'16px', fontWeight:700, fontWeight:700}"
			:left-icon-color="`${textColor}`"
			v-if="showTitle"
			/>
		<view class="content-page">
			<view class="input-search-box">
				<input 
					inputmode="search" 
					confirm-type="search"
					focus
					:value="input" 
					class="input-search" 
					hold-keyboard
					controlled
					:adjust-position="false"
					:placeholder="onlineAudit ? '请输入产品名称' : '请输入卡券名称'"
					@input="inputChanged"
					@confirm="doSearch"/>
				<view class="search-img">
					<u-icon name="search" size="20" color="#999" v-if="!searching"
						@click="doSearch()"></u-icon>
					<u-loading-icon mode="circle" size="16" color="#999" show v-else></u-loading-icon>
				</view>
			</view>
			<view class="hot-search" v-if="!result.data && !onlineAudit">
				<view class="text1">
					热门搜索
				</view>
				<view class="flex-a" style="flex-wrap: wrap;">
					<view class="keyword" v-for="(item, index) in hotKeywords" :key="index"
						@click="clickKeyword(item)">
						{{item}}
					</view>
				</view>
			</view>
			
			<view class="search-result" v-if="result.data">
				<view class="empty-box" v-if="result.data.length == 0">
					<u-empty mode="search">
					</u-empty>
				</view>
				<view v-else>
					<view style="padding: 0 10px;">
						<view class="text1">
							搜索结果
						</view>
					</view>
					<view class="card-box">
						<view class="tip">
							结果:找到"<text>{{result.keyword}}</text>"相关产品<text>{{result.total}}</text>个
						</view>
						<view class="card-list">
							<u-list @scrolltolower="loadMore" :height="`calc(100vh - 132px - ${navHeight}px)`">
							  <view style="height: 10px;"></view>
							  <u-list-item v-for="(item, index) in result.data" :key="index">
								<view class="card-item flex-b" @click="clickCard(item)">
									<view class="left-box flex-a">
										<image :src="baseUrl(item.icon)" class="card-img"></image>
										<view>
											<view class="card-name">
												{{item.name}}
											</view>
											<view class="card-num">
												{{onlineAudit ? '价格' : '面值'}}：{{item.face_values.join(',')}}
											</view>
										</view>
									</view>
									<u-icon name="arrow-right" size="16" color="#606266"></u-icon>
								</view>
							  </u-list-item>
							  <u-loadmore :status="status" icon line/>
							  <view style="height: 10px;"></view>
							</u-list>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { systemInfo } from '@/utils/mixin';
	import { baseUrl, getHotKeywords, search } from '@/api';
	import {mapState, mapGetters} from "vuex";

	export default {
		mixins: [systemInfo],
		data() {
			return {
				baseUrl,
				input:'',
				hotKeywords:[],
				keyword: '',
				searching:false,
				page: 1,
				result: {},
				status: 'loadmore'
			}
		},
		async onLoad(){
			this.getSystemInfo();
			const res = await getHotKeywords();
			this.hotKeywords = res.data;
			this.result.data;
		},
		computed: mapState(['onlineAudit']),
		methods: {
			clickKeyword(item) {
				this.input = item
				this.keyword = item
				this.doSearch()
			},
			inputChanged({detail}) {
				this.keyword = detail.value.trim();
				if (this.keyword != this.result.keyword) {
					this.result = {}
				}
			},
			clickCard(item) {
				uni.navigateTo({
					url:`/pages/detail/index?cardId=${item.id}`
				})
			},
			async doSearch() {
				if (this.keyword.length == 0) return;
				
				this.status = 'loading';
				this.searching = true;
				this.page = 1;
				const res = await search(this.keyword, this.page);
				this.result = {
					total: res.total,
					keyword: this.keyword,
					data: res.data,
					hasMore: res.is_next
				};
				this.searching = false;
				this.status = res.is_next ? 'loadmore' : 'nomore' 
			},
			async loadMore() {
				if (this.status != 'loading' && this.result.hasMore) {
					this.page += 1;
					this.status = 'loading';
					const res = await search(this.result.keyword, this.page);
					this.result.data = this.result.data.concat(res.data);
					this.result.hasMore = res.is_next;
					this.status = res.is_next ? 'loadmore' : 'nomore' 
				}
			}
		}
	}
</script>

<style lang="scss" scoped>

.content-page {
    padding: 10px 0;
	
	.input-search-box {
	    width: calc(100% - 20px);
	    height: 35px;
	    border-radius: 35px;
	    background: #f9f9f9;
	    position: relative;
	    box-shadow: 0 0 3px 1px rgba(0, 0, 0, .1);
		margin: 0 10px;
		
		.input-search {
		    width: 80%;
		    height: 100%;
		    font-size: 13px;
		    padding: 0 10px;
		}
		
		.search-img {
		    z-index: 11;
		    padding: 7px 13px 7px 20px;
		    width: 20px;
		    height: 20px;
		    position: absolute;
		    top: 0px;
		    right: 0px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	
	.hot-search {
		padding: 0 10px;
		
		.keyword {
			background-color: #ffe3e0;
			padding: 4px 12px;
			margin: 4px;
			font-size: 14px;
			color: #666;
			border-radius: 2px;
		}
	}
	
	.text1 {
	    text-align: left;
	    font-size: 16px;
	    margin-top: 20px;
	    margin-bottom: 10px;
	    line-height: 16px;
	    height: 16px;
	    font-weight: 500;
	    padding-left: 6px;
	    border-left: 3px solid $main-color;
	}
	
	.search-result {
		.empty-box {
			height: calc(100vh - 174px);
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.card-box {
			.tip {
			    font-size: 14px;
			    text-align: center;
				padding: 10px 0 0 0;
			}
		}
		
		.card-list {
			.card-item {
			    padding: 15px 10px;
			    box-sizing: border-box;
			    box-shadow: 0 1px 20px 0 hsla(0, 0%, 76.5%, .38);
				margin: 4px 10px;
				
				.left-box {
				    font-size: 14px;
				    font-family: Times New Roman;
					
					.card-img {
					    width: 52px;
					    height: 52px;
					    border-radius: 50%;
					    margin-right: 20px;
					}
					
					.card-name {
					    font-weight: bold;
					    margin-bottom: 10px;
					}
					
					.card-num {
					    width: 166px;
					    overflow: hidden;
					    text-overflow: ellipsis;
					    white-space: nowrap;
					}
				}
			}
		}
	}
}
</style>
